<template>
    <!-- components/Bar.wxml -->
    <view class="barbox">
        <!-- <view class="baritem {{tabon==3?'on':''}}" bindtap="gotoPage" data-index="3">介绍</view>
    <view class="baritem {{tabon==1?'on':''}}" bindtap="gotoPage" data-index="1">壁纸</view> -->
        <view :class="'baritem  ' + (tabon == 2 ? 'on' : '')" @tap="gotoPage" data-index="2">
            <view class="cuIcon-home xs" @tap="gotoPage" data-index="2"></view>
            剧场
        </view>
        <view :class="'baritem ' + (tabon == 0 ? 'on' : '')" @tap="gotoPage" data-index="0">
            <view class="cuIcon-time xs" @tap="gotoPage" data-index="0"></view>
            追剧
        </view>
        <view :class="'baritem ' + (tabon == 4 ? 'on' : '')" @tap="gotoPage" data-index="4">
            <view class="cuIcon-people xs" @tap="gotoPage" data-index="4"></view>
            我的
        </view>
    </view>
</template>

<script>
// components/Bar.js
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        tabon: {
            type: Number,
            default: 2
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        gotoPage(e) {
            console.log(e.target.dataset.index);
            let url = '';
            if (e.target.dataset.index == 0) {
                url = '/pages/afterplay/afterplay';
            } else if (e.target.dataset.index == 2) {
                url = '/pages/list/list';
            } else if (e.target.dataset.index == 4) {
                url = '/pages/mine/mine';
            }
            uni.switchTab({
                url: url
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import '../colorui/main.css';
@import '../colorui/icon.css'; /* components/Bar.wxss */
/*引入colorui组件*//*引入colorui组件*/
.barbo {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: #e0e0e0 solid 1px;
    position: fixed;
    bottom: 0;
    z-index: 5000;
    color: #a3a3a3;
    left: 0;
    height: 96rpx;
    width: 100%;
}
.baritem.on {
    color: #1cbbb4;
}
.xs {
    font-size: 38rpx;
}
.baritem {
    justify-content: center;
    display: inline-grid;
    align-items: center;
    width: 20%;
    text-align: center;
    z-index: 999;
}
</style>
